<!-- pages/register/register.vue -->
<template>
    <view class="container">
        <view class="logo">
            <image class="tp" src="/static/image/caishen.png" mode="aspectFit"></image>
        </view>
        <view class="form">
            <uni-forms ref="baseForm" :model="baseFormData">
                <uni-forms-item label="用户名" required>
                    <uni-easyinput v-model="baseFormData.userName" placeholder="请输入用户名" :maxlength="4" />
                </uni-forms-item>
                <uni-forms-item label="手机号" required>
                    <uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" maxlength="11" :rules="phoneRules" />
                </uni-forms-item>
				<uni-forms-item label="密码" required>
				    <view class="password">
				        <uni-easyinput v-model="baseFormData.password" placeholder="请输入密码" type="password" :maxlength="16"></uni-easyinput>
				        <!-- <view v-if="passwordErrorMessage" class="error-message">{{ passwordErrorMessage }}</view> -->
				    </view>
				</uni-forms-item>
                <uni-forms-item label="验证码" required>
                    <view class="captcha-input-container">
                        <uni-easyinput v-model="baseFormData.captcha" placeholder="请输入验证码" class="captcha-input" :maxlength="6" />
                        <button class="yzm" @click="verification" :disabled="countdown > 0">
                            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                        </button>
                    </view>
                </uni-forms-item>
                <button class="zc" type="primary" @click="register">注册</button>
            </uni-forms>
			<uni-row>
				<uni-col  :span=24 > 
					<text style="float:right;"> 已注册？点击?点击:<span class="link" @click="toLoginPage"> 登录</span></text>
				</uni-col>
			</uni-row>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            baseFormData: {
                userName: '',
                phone: '',
                captcha: '123456',
                password: ''
            },
            userNameErrorMessage: '',
            phoneErrorMessage: '',
            passwordErrorMessage: '',
            phoneRules: [
                {
                    required: true,
                    message: '手机号不能为空',
                    trigger: 'blur'
                },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号码格式',
                    trigger: 'blur'
                }
            ],
            countdown: 0, // 倒计时初始值
            isDisabled: false, // 按钮是否禁用
            countdownText: '获取验证码' // 按钮初始文字
        };
    },
    methods: {
		toLoginPage(){
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
        validateUserName() {
            if (this.baseFormData.userName.length > 4 || !/^[一-龥]{1,4}$/.test(this.baseFormData.userName)) {
                uni.showToast({
                    title: '用户名只能是四位数的汉字',
                    icon: 'none'
                });
                return false;
            } else {
                this.userNameErrorMessage = '';
            }
            return true;
        },
        verification() {
            this.chekPhone();
            let data = {
                phone: this.baseFormData.phone
            };
            this.$myRequest({
                method: 'get',
                url: '/sysUser/getRegisterCode',
                data: data
            }).then((res) => {
				// 设置倒计时时间
                this.serverCaptcha = res.data; // 将后端返回的值存储到一个新的变量 serverCaptcha 中
				uni.showToast({
				    title: '获取验证码成功！',
				    icon: 'none'
				});
				this.getCaptcha(); // 开始倒计时
            });
        },
        chekPhone() {
            // 验证手机号格式
            const valid = this.baseFormData.phone.match(/^1[3-9]\d{9}$/);
            if (!valid) {
                uni.showToast({
                    title: '请输入正确的手机号码格式',
                    icon: 'none'
                });
                // 重置相关数据
                this.baseFormData.phone = '';
                return false;
            }
            return true;
        },
        getCaptcha() {
			this.countdown = 60; 
            let interval = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(interval);
                    this.countdown = 0;
                    // 倒计时结束后启用获取验证码按钮
                    this.isDisabled = false;
                }
            }, 1000);
        },
        comparisonCode() {
            // 在这里比较用户输入的验证码和后端返回的验证码
            if (this.baseFormData.captcha != this.serverCaptcha) {
                console.log(this.serverCaptcha);
                uni.showToast({
                    title: '验证码有误，请重新输入',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        validatePassword() {
            if (this.baseFormData.password.length < 6 || /\s/.test(this.baseFormData.password) || !/^[a-zA-Z0-9]+$/.test(this.baseFormData.password)) {
                uni.showToast({
                    title: '密码需要大于 6 位，且只能包含数字和字母，不能有空格',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        register() {
			let f4 = this.validateUserName();  // 用户名校验
			if (!f4) {
			    return;
			}
			let f3 = this.chekPhone(); // 手机号校验
			if (!f3) {
			    return;
			}
            let f = this.validatePassword(); // 密码校验
            if (!f) {
                return;
            }
            let f2 = this.comparisonCode(); // 验证码校验
            if (!f2) {
                return;
            }
            this.$myRequest({
                method: 'POST',
                url: '/sysUser/registerUser',
                data: {
                    userName: this.baseFormData.userName,
                    phone: this.baseFormData.phone,
                    captcha: this.baseFormData.captcha,
                    password: this.baseFormData.password,
                    loginName: this.baseFormData.phone,
                    email: this.baseFormData.phone,
                    registerFlag: 0
					}
				}).then(res => {
					console.log(res.data)
					if(res.flag){
						uni.showToast({
						    title: '恭喜您！注册成功！',
						    icon: 'none'
						});
						//const deviceId = uni.getSystemInfoSync().deviceId;
						uni.setStorageSync("phone",this.baseFormData.phone)
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						},1000)
					}else{
						if(res.code ==100003){
							uni.showToast({
							    title: '该手机号已经被注册！',
							    icon: 'none'
							});
						}else{
							uni.showToast({
							    title: res.data.errMsg,
							});
						}
					}
                   
                })
        }
    }
};
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
	 .link {
	    text-decoration: underline;
	    color:  #742305;;
	    cursor: pointer; /* 将鼠标指针变为手指形状，表示点击 */
	  }
.form {
    width: 80%;
    margin-bottom: 30px;
    /* display: flex;
  flex-direction: column;
  align-items: center; */
}
uni-easyinput {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1px solid #ccc;
    border-radius: 5rpx;
    margin-bottom: 20rpx;
}
.captcha-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
}
.yzm {
    width: 60%;
    height: 35px;
    margin-right: -1px;
    font-size: 12px;
    position: absolute;
    top: 1px;
    color: black;
    right: 0;
}
.zc {
    width: 100%;
    height: 45px;
    color: #fff;
    border: none;
    border-radius: 4px;
    background-color: #742305;
    font-size: alter;
}
.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}
.go {
    color: #742305;
    position: absolute;
    top: 5px;
    left: 260px;
}
.ty {
    text-align: center;
    color: darkgray;
    position: absolute;

    left: 70px;
    top: 5px;
}
</style>
